<template>

  <!-- buycar -->
  <div class="buycar">
    <!-- 最外面的 模态框  -->
    <div class='dd-model' v-show="carBool" @click='outLayer'>

    </div>
    <div class="buycar dd-fixed-bottom">
      <div class="car" v-show="carBool">
        <!-- 标题 和 清空 -->
        <div class="dd-row dd-h-2side">
          <div class="dd-row">
            <div class="dd-c_o">| </div>
            <div>&nbsp;商品明细</div>
          </div>
          <div>
            <span @click="cleanAll">清空</span>
          </div>
        </div>

        <div class="carFor">
          <div v-for="(item2,index2) in goodsInCar" :key="index2" v-show="!!item2.num">
            <!-- <div class="item dd-row dd-h-2side "v-show="!!item2.num"> -->
            <div class="itemLink dd-row dd-h-2side dd-v-center ">
              <!-- 左面的食物图 和食品名称 -->
              <div class=" dd-row dd-v-center dd-h-2side dd-flex1">
                <div class="dd-row dd-v-center">
                  <div class="goodsPicDiv">
                    <img class="goodsPic" :src="!!item2.pic ? item2.pic : '@/assets/img/food.png'" alt="商品图片" />
                  </div>
                  <div class="goodsName">{{item2.name}}</div>
                </div>
                <div class="goodsPrice">
                  ￥{{item2.price}}
                </div>
              </div>
              <!-- 右边的加减 数量 -->
              <div class="number">
                <Number :id="item2.id" :num="item2.num"></Number>
              </div>
            </div>

          </div>

        </div>

      </div>

      <!-- 点出拉出层的按钮 合计钱数 去结算按钮 -->
      <div class="bottomDiv dd-row dd-h-2side dd-h-center">
        <div class="dd-row control">
          <div class="controlOutLayer" @click="outLayer">
            <div class='num' v-show="!!goodsInCar.length">{{goodsInCar.length}}</div>
            <img class="buyCarBag" :class="hoverCarBool ? 'imgrHover' : ''" src="@/assets/img/buycar.png" alt="点出购物车弹层的按钮" />
          </div>
          <div class='dd-row dd-v-center'>
            <div class="totalMoney">合计：￥{{totalMoney}}</div>
          </div>
        </div>
        <!-- 点击去结算之后，生成订单-状态为待支付。  -->
        <div class=' dd-btn-red dd-row dd-v-center'   @click="toPay">去结算</div>
      </div>
    </div>
  </div>

</template>
<script>
import Number from "@/components/scanGoods/Number";
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      carBool: null /* 其控制 点击了碗之后 弹出层的显示与否 */,
      carBottomStyleBool: false /* 其控制 下方样式 和 禁用与否  */,
      tm: 12312,
      //   buyCarArrs: this.AllData.InTheBuyCar
      // goodsInCar: [],/* 存在购物车里的 */
      buyCarArrs: [],
      len: false,
      hoverCarBool: false
      // totalMoney: 12312
    };
  },
  computed: {
    ...mapState({
      goodsInCar: state => {
        return state.goods.goodsInCar;
      },
      totalMoney: state => {
        return state.goods.totalMoney;
      }
    })
  },
  mounted() {},
  methods: {
    //   右上角的清理 清空
    cleanAll() {
      this.$store.commit("cleanBuyCar");
    },
    //弹出层的显示与否
    outLayer() {
      console.log("弹出 弹出层");
      this.carBool = !this.carBool;
    },
    //
    toPay() {
      console.log("点击了去结算");

      /*生成的订单
      时间戳
      商品详情
      总价
    */

      //  设置订单
      let generateOrder = {
        id: "001220180621",
        /* 带有机器编码+日期 的id */
        timeStamp: new Date().getTime(),
        /* 时间戳 */
        totalMoney: this.totalMoney,
        /* 总计钱数 */
        status: 1,
        /* 状态值 */
        goods: this.goodsInCar
      };

      console.log("generateOrder-->", generateOrder);
    this.$store.commit("makeOrderWaitPay",generateOrder)
      this.$router.push(`/pay`);
      
    }
  },
  components: {
    Number
  }
};
</script>
<style scoped>
/* 购物车里的每行元素 */
.car {
  background: #ddd;
  max-height: 80vw;
  padding: 5pt;
  border-radius: 4pt 4pt 0 0;
}

.car .item {
  height: 30pt;
  display: flex;
  align-self: center;
  align-items: center;
}

.car .item .right {
  margin-left: 10pt;
}

/* 食物的具体 */

.carFor {
  height: 90pt;
  overflow-x: hidden;
  overflow-y: auto; /* 隐藏滚动条必备 条件 */ /* margin-right: -20pt;  隐藏滚动条  */
}
/* 商品的名字 */
.carFor .itemLink .goodsName {
  font-size: 10pt;
  margin-left: 10pt;
}
/* 价钱  */
.carFor .itemLink .goodsPrice {
  font-size: 10pt;
}

/* 最下面的控制弹出层的显示与隐藏 */
.bottomDiv {
  background-color: #f1f1f1;
  height: 30pt;
}
.bottomDiv .control {
}
/*  购物袋 */
.control .controlOutLayer {
  width: 30pt;
  margin: 0 10pt;
  transform: translateY(-16pt);
  position: relative;
}
/*总价*/
.bottomDiv .control .totalMoney {
  font-weight: bold;
  font-size: 12pt;
}
/* 右上角的小标 */
.control .controlOutLayer .num {
  background-color: #d22c22;
  width: 10pt;
  height: 10pt;
  line-height: 10pt;
  position: absolute;
  right: -3pt;
  top: -3pt;
  border-radius: 50%;
  color: #fff;
  font-size: 5pt;
  z-index: 101;
}
/* 购物袋的图标 */
.control .controlOutLayer .buyCarBag {
  height: 30pt;
  width: 30pt;
  z-index: 98;
}

/* 逻辑是 点击了父级的元素，通过 改编真值 实现 样式的改变  */

.imgrHover {
  transform: scale(0.9, 0.9);
}

/* itemLink  */

.itemLink {
  width: 100%;
  height: 30pt;
  margin-bottom: 1pt;
  border-bottom: 1pt dotted #ccc;
  box-sizing: border-box;
  font-size: 10pt;
}
.itemLink .goodsPicDiv .goodsPic {
  width: 20pt;
  height: 20pt;
  box-shadow: 0 0 2pt #ccc;
}
</style>

